<template>
    <view>
        <view class="container" v-if="!isshow">
            <view class="jobinfo">
                <view class="jobtitle">
                    <view>{{ data.jobtitle }}</view>
                    <view>{{ data.money }}</view>
                </view>

                <view class="joblabel">
                    <view>{{ data.education }} | {{ data.express }}</view>
                </view>

                <view class="jobdetail">
                    <view class="jobtitle">福利待遇</view>
                </view>

                <view class="contentlist" style="padding-left: 20rpx">
                    <view class="special">
                        <view class="item" v-for="(item, index) in data.special" :key="index">{{ item }}</view>
                    </view>
                </view>

                <!-- 

  <view class="jobdetail">
      <view class="jobtitle">联系方式</view>
  </view>
              <view class="contentlist">
                  
                <view class="listitem">
                    <view class="items"><text class="fa fa-user fa-lg" style="color:#bfbfbf"></text> <text>{{companyinfo.mastername}}</text></view>
                    <view class="items"  bindtap='doCall'   data-tel="{{companyinfo.tel}}"><text class="fa fa-phone fa-lg" style='color:#bfbfbf;'></text><text>{{companyinfo.tel}}</text></view>
                  
                </view>
                    
              </view>

-->

                <block v-if="data.videourl">
                    <view class="jobdetail">
                        <view class="jobtitle">视频介绍</view>
                    </view>
                    <view class="jobcontent">
                        <view class="detail2">
                            <video :autoplay="true" :src="data.videourl" style="width: 700rpx"></video>
                        </view>
                    </view>
                </block>

                <view class="jobdetail">
                    <view class="jobtitle">职位说明</view>
                </view>
                <view class="jobcontent">
                    <view class="jobfiled">
                        <view>招聘: {{ data.num }}人</view>
                        <view>年龄: {{ data.age }}</view>
                        <view>
                            性别:
                            <block v-if="data.sex == 1">男</block>
                            <block v-else-if="data.sex == 2">女</block>
                            <block v-else>男女不限</block>
                        </view>
                        <view>学历: {{ data.education }}</view>
                    </view>

                    <view class="jobfiled2">职责范围:</view>

                    <view class="detail">
                        <rich-text :nodes="data.content"></rich-text>
                    </view>
                </view>

                <view class="jobdetail">
                    <view class="jobtitle">企业信息</view>
                </view>

                <view class="company">
                    <view class="companyinfo">
                        <view class="companyname">
                            <view @tap="toCompanyDetail" :data-id="data.companyid">{{ companyinfo.companyname }}</view>
                            <view @tap="toCompanyDetail" :data-id="data.companyid">
                                规模: {{ companyinfo.companyworker }} 性质: {{ companyinfo.companytype }} 行业: {{ companyinfo.companycate }}
                            </view>
                            <view @tap="goMap">
                                <text class="fa fa-map-marker fa-lg" style="color: #bfbfbf"></text>
                                {{ companyinfo.address }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="map">
                    <map
                        id="map"
                        :longitude="companyinfo.lng"
                        :latitude="companyinfo.lat"
                        scale="14"
                        :controls="controls"
                        @controltap="controltap"
                        :markers="markers"
                        @markertap="markertap"
                        :polyline="polyline"
                        @regionchange="regionchange"
                        show-location
                        style="width: 700rpx; height: 400rpx"
                    ></map>
                </view>
            </view>

            <!--

  <view class="jobtips">
  <view>
   面试过程中，用人单位如收费用均有诈骗嫌疑!如遇无效、虚假、诈骗信息，请举报
  </view>
   <view class="suggest">
    <view><image src="../../resource/img/jb.png"></image></view>
        <view>举报</view>
   
   </view>
  </view>
-->
            <block v-if="piclist.length > 0">
                <view class="jobdetail">
                    <view class="jobtitle">企业环境</view>
                </view>
                <view class="jobcontent">
                    <view class="detail2">
                        <block v-for="(item, index) in piclist" :key="index">
                            <image data-id="" :src="item" mode="widthFix" @load="imgHeight" style="width: 100%" />
                        </block>
                    </view>
                </view>
            </block>

            <view class="jobdetail">
                <view class="jobtitle" style="margin-left: 25rpx">为您推荐</view>
            </view>

            <!-- parse <template is="ejoblist" v-if="joblist" :data="joblist"/> -->
            <block name="ejoblist"  v-if="joblist">
                <view class="joblist_2" v-for="(item, index) in joblist" :key="index">
                    <view class="title_2" @tap="toJobDetail" :data-id="item.id">
                        <view class="jobinfo_2">
                            <view class="jobinfoleft_2">
                                <view class="address_2">
                                    <view class="jobname_2">{{ item.jobtitle }}</view>

                                    <view class="moneyinfo_2">
                                        <block v-if="item.money == 0">面议</block>
                                        <block v-else>{{ item.money }}</block>
                                    </view>
                                    <view class="vprice2"></view>
                                </view>

                                <view class="joblable_2">{{ item.areaname }} | {{ item.education }}</view>

                                <view class="special_2">
                                    <view class="items_2" v-for="(itemSpecial, index1) in item.speciallist" :key="index1">{{ itemSpecial }}</view>

                                    <!--
                                                    <view class="items_2" >月休</view> 
                                                    <view class="items_2" >免费培训</view>
                                                    <view class="items_2" >晋升空间</view>
                                                    <view class="items_2" >综合补贴</view>
                                                       -->
                                </view>
                            </view>

                            <view class="jobinforight_2">
                                <view class="fxmoney_2" v-if="item.vprice > 0">
                                    <view style="width: 200rpx; color: #fff">推荐奖300元/人</view>
                                    <view>入职奖100元/人</view>
                                </view>
                            </view>
                        </view>

                        <view class="detail_2">
                            <view class="info_2">
                                <view class="companyinfo_2" style="font-size: 0.9rem">
                                    {{ item.companyname }}
                                </view>
                                <view class="jobmoney_2">
                                    <view class="time_2">{{ item.updatetime }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>

        <view class="asklist">
            <view style="margin-left: 20rpx">问企业</view>

            <view @tap="toAskjob">我要提问</view>
        </view>

        <view class="weixinmao-float">
            <view class="weixinmao-foot">
                <view class="footer">
                    <button open-type="share"><text class="fa fa-share-square-o fa-lg"></text></button>
                </view>

                <view class="footer" @tap="doSavejob" :class="savestatus == 1 ? 'red' : 'black'" :data-id="companyinfo.id">
                    <text class="fa fa-heart-o fa-lg"></text>
                    收藏
                </view>

                <view class="footer" @tap="doSendjob" :data-id="companyinfo.id">我要报名</view>
            </view>
        </view>

        <view class="u-tap-btn">
            <button class="u-go-home2" open-type="contact">
                <view class="iconfont fa fa-comments-o"></view>
            </button>
        </view>
    </view>
</template>

<script>
import { Partjob } from '../../model/partjob-model.js';
var partjob = new Partjob();
export default {
    data() {
        return {
            id: 0,
            savestatus: 0,
            title: '',

            data: {
                jobtitle: '',
                money: '',
                education: '',
                express: '',
                special: [],
                videourl: '',
                num: '',
                age: '',
                sex: 0,
                content: '',
                companyid: ''
            },

            companyinfo: {
                companyname: '',
                companyworker: '',
                companytype: '',
                companycate: '',
                lng: '',
                lat: '',
                id: ''
            },

            joblist: '',
            isshow: '',
            controls: [],
            markers: [],
            polyline: '',
            piclist: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (e) {
        this.onLoadClone3389(e);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading();
        this.onLoadClone3389({});
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        var that = this;
        return {
            title: that.title,
            path: '/pages/jobdetail/index?id=' + that.id
        };
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (e) {
            var that = this;
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
            if (that.id > 0) {
                var id = that.id;
            } else {
                var id = e.id;
                that.id = e.id;
            }
            var params = {
                id: that.id
            };
            partjob.getJobDetailData((data) => {
                uni.setNavigationBarTitle({
                    title: data.jobinfo.jobtitle
                });
                that.title = data.jobinfo.title;
                that.savestatus = data.jobinfo.savestatus;
                that.companyinfo = data.jobinfo.companyinfo;
                console.log(data.joblist);
                that.setData({
                    data: data.jobinfo,
                    savestatus: that.savestatus,
                    companyinfo: data.jobinfo.companyinfo,
                    joblist: data.joblist
                });
                uni.hideNavigationBarLoading(); //完成停止加载
                uni.stopPullDownRefresh();
            }, params);
        },

        goMap: function (e) {
            var that = this;
            uni.openLocation({
                latitude: Number(that.companyinfo.lat),
                longitude: Number(that.companyinfo.lng),
                scale: 18,
                name: that.companyinfo.companyname,
                address: that.companyinfo.address
            });
        },

        doSendjob: function (e) {
            var that = this;
            uni.navigateTo({
                url: '/pages/baoming/index?id=' + that.id
            });

            /*
    var companyid =  e.currentTarget.dataset.id;
    var params = { jobid:that.data.id,companyid:companyid};
    
     partjob.sendJob((data) => {
       if(data.status == 3)
      {
        
          wx.showModal({
          title: '提示',
          content: data.msg,
          showCancel: false,
          success:function(){
             wx.navigateTo({
              url: '/pages/mynote/index',
            })
           }
        })
        return
       }else{
       wx.showToast({
        title: data.msg,
        icon: 'none',
        duration: 2000
       })
       }
    },params);
    */
        },

        doSavejob: function (e) {
            var that = this;
            var companyid = e.currentTarget.dataset.id;
            var params = {
                jobid: that.id,
                companyid: companyid
            };
            partjob.jobSave((data) => {
                if (data.status == 0) {
                    that.savestatus = 1;
                    that.setData({
                        savestatus: 1
                    });
                    /*
                wx.showToast({
                  title: data.msg,
                  icon: 'success',
                  duration: 2000
                 })
          */
                } else {
                    that.savestatus = 0;
                    that.setData({
                        savestatus: 0
                    });

                    /*
          wx.showToast({
            title: data.msg,
            icon: 'success',
            duration: 2000
           })
            */
                }
            }, params);
        },

        toAskjob: function () {
            var that = this;
            var id = that.id;
            uni.navigateTo({
                url: '/pages/askjob/index?id=' + id
            });
        },

        toCompanyDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/companydetail/index?id=' + id
            });
        },

        toJobDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/jobdetail/index?id=' + id
            });
        },

        doCall: function (e) {
            console.log(e.currentTarget);
            var tel = e.currentTarget.dataset.tel;
            uni.makePhoneCall({
                phoneNumber: tel,
                //此号码并非真实电话号码，仅用于测试
                success: function () {
                    console.log('拨打电话成功！');
                },
                fail: function () {
                    console.log('拨打电话失败！');
                }
            });
        },

        controltap() {
            console.log('占位：函数 controltap 未声明');
        },

        markertap() {
            console.log('占位：函数 markertap 未声明');
        },

        regionchange() {
            console.log('占位：函数 regionchange 未声明');
        },

        imgHeight() {
            console.log('占位：函数 imgHeight 未声明');
        }
    }
};
</script>
<style>
@import '../templates/css/index_2.css';
page {
    background-color: #f8f8f9;
}
.container {
    background-color: #f8f8f9;
    min-height: 100%;
}

.container .jobinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin-top: 20rpx;
    padding-top: 30rpx;
    padding-bottom: 10rpx;
}

.container .jobinfo .jobtitle {
    width: 730rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 15rpx;
}
.container .jobinfo .jobtitle view:nth-child(1) {
    font-weight: bold;
    font-size: 1.2rem;
}

.container .jobinfo .jobtitle view:nth-child(2) {
    color: #ff9102;
    font-size: 1rem;
    padding: 5rpx;
    font-weight: bold;
}

.container .jobinfo .joblabel {
    width: 730rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20rpx;
    font-size: 14px;
    color: #7b7a7a;
}

.advmoney {
    width: 100%;
}

.container .jobinfo .special {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 30rpx;
    font-size: 0.8rem;
    width: 730rpx;
}
.container .jobinfo .special .item {
    padding-left: 15rpx;
    padding-right: 15rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;

    border-radius: 5rpx;
    margin-right: 10rpx;
    margin-bottom: 15rpx;
    background: #e4f3fc;
    color: #5c82c0;
}

.container .joblabel view {
    padding-left: 15rpx;
    padding-right: 15rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;

    border-radius: 5rpx;
    margin-right: 10rpx;
    margin-bottom: 15rpx;
}

.container .companyinfo {
    margin-top: 10rpx;
    width: 730rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 0rpx solid #e5e5e5;
}

.container .companyinfo image {
    width: 150rpx;
    height: 150rpx;
    align-self: center;
}
.company {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 10rpx;
    width: 730rpx;
}

.container .companyinfo .companyname {
    width: 730rpx;
    display: flex;
    flex-direction: column;
    margin-left: 1%;
    padding-top: 10rpx;
    padding-bottom: 40rpx;
}
.container .companyinfo .companyname view:nth-child(1) {
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.container .companyinfo .companyname view:nth-child(2) {
    font-size: 0.9rem;
    color: #777676;
    margin-top: 15rpx;
}
.container .companyinfo .companyname view:nth-child(3) {
    font-size: 0.9rem;
    color: #777676;
    margin-top: 15rpx;
}
.container .companyaddress {
    padding-left: 20rpx;
    padding-top: 20rpx;

    font-size: 0.8rem;
}

.container .contentlist {
    margin-top: 10rpx;
    width: 730rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.container .contentlist .title {
    width: 730rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 0.9rem;
    border-bottom: 0rpx solid #efefef;
    display: flex;
    flex-direction: row;
    align-content: center;
}

.container .contentlist .title view:nth-child(1) {
    height: 40rpx;
    line-height: 40rpx;
    width: 6rpx;
    background: #3274e5;
    align-self: center;
}
.container .contentlist .title view:nth-child(2) {
    height: 80rpx;
    line-height: 80rpx;
    width: 200rpx;
    padding-left: 15rpx;
}
.container .contentlist .listitem {
    width: 710rpx;
    display: flex;
    flex-direction: column;
}
.container .contentlist .listitem .items {
    color: #777676;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 14px;
    border-bottom: 0rpx dotted #e5e5e5;
}
.container .contentlist .listitem .items text {
    color: #7b7a7a;
    padding-left: 10rpx;
}

.container .jobdetail {
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    width: 730rpx;
    align-items: center;
    border-bottom: 0rpx solid #eeeeee;
}

.container .jobdetail .jobtitle {
    font-weight: bold;
    font-size: 18px;
    width: 730rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.map {
    width: 700rpx;
    height: 400rpx;
}
.asklist {
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    width: 710rpx;
    justify-content: space-between;
    border-bottom: 0rpx solid #eeeeee;
    padding-right: 10rpx;
}
.asklist view:nth-child(1) {
    font-weight: bold;
    font-size: 18px;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.asklist view:nth-child(2) {
    font-size: 13px;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    color: blue;
}

.container .jobcontent {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 720rpx;
    align-items: center;
}

.jobfiled {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jobfiled view {
    padding: 15rpx;
    padding-left: 0rpx;
    width: 320rpx;
    color: #888888;
    font-size: 15px;
}
.jobfiled2 {
    color: #888888;
    font-size: 0.9rem;
    width: 720rpx;
}
.container .jobcontent .detail2 {
    width: 700rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    color: #777676;
    font-size: 0.8rem;
}
.detail {
    width: 700rpx;
    padding-top: 30rpx;

    padding-bottom: 30rpx;
    font-size: 16px;
    color: #888888;
}
.jobtips {
    width: 730rpx;
    display: flex;
    flex-direction: row;

    background: #fff7de;
    padding: 10rpx;
    margin-left: 10rpx;
    margin-top: 10rpx;
}
.jobtips view:nth-child(1) {
    width: 550rpx;
    font-size: 0.7rem;
    color: #ff6948;
}

.jobtips view:nth-child(2) {
    width: 110rpx;
    font-size: 0.7rem;
    color: #007aaf;
}

.suggest {
    display: flex;
    flex-direction: column;
}
.suggest image {
    width: 50rpx;
    height: 50rpx;
}
.weixinmao-float {
    height: 150rpx;
}
.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;

    background: #fff;
    padding-top: 10rpx;
}

.weixinmao-foot > view:nth-child(3) {
    color: #fd6a36;
    align-self: center;
    width: 220rpx;
    height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #fd6a36;
    border-radius: 5rpx;
    margin-right: 10rpx;
    margin-bottom: 5rpx;
}

.footer button {
    color: #747474;
    align-self: center;
    height: 80rpx;
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    text-align: center;
    padding-top: 10rpx;
    border: 0rpx;
}

button::after {
    border: none;
}
.weixinmao-foot view:nth-child(1) {
    color: #747474;
    align-self: center;
    height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    width: 20%;
    text-align: center;
    padding-top: 20rpx;
    border-radius: 5rpx;
    margin-left: 5rpx;
}
/*
.weixinmao-foot view:nth-child(2){
color:#FFF;
align-self: center;
height: 100rpx;
font-size: .9rem;
display: flex;
flex-direction: column;
background: #11cd6e;
width:20%;
text-align: center;
 padding-top:20rpx;
}   

*/
.weixinmao-foot view:nth-child(2) {
    align-self: center;
    height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    padding-top: 20rpx;
    background: #fff;
}
.black {
    color: #777676;
}
.red {
    color: red;
}
.weixinmao-foot view:nth-child(3) {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    background: #fe552e;
    width: 55%;
    border-radius: 5rpx;
}

.weixinmao-foot view image {
    width: 50rpx;
    height: 50rpx;
    align-self: center;
}

.footerbutton {
    background: #fe552e;
}

.weixinmao-float_pay {
    height: 150rpx;
}
.weixinmao-foot_pay {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #1aac19;
}

.weixinmao-foot_pay view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
}
.weixinmao-foot_pay view image {
    width: 70rpx;
    height: 70rpx;
    align-self: center;
}

.weixinmao-msg-userinfo {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.weixinmao-content-userinfo {
    width: 650rpx;
    height: 100%;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.weixinmao-content-userinfo .userinfo-title {
    align-self: center;
    font-size: 1.2rem;
    margin-top: 40rpx;
}

.weixinmao-content-userinfo .userinfo-content {
    align-self: center;
    font-size: 0.9rem;
    padding: 25rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999999;
}

.weixinmao-content-userinfo .userinfo-img {
    align-self: center;

    font-size: 0.9rem;
}

.weixinmao-content-userinfo .userinfo-img image {
    align-self: center;

    width: 400rpx;
    height: 400rpx;
}
.userinfo-button {
    display: flex;
    flex-direction: row;
    width: 400rpx;

    align-items: baseline;
    padding-bottom: 20rpx;
}
.userinfo-button button {
    background: #44b549;
    font-size: 0.8rem;
    color: #fff;
    width: 300rpx;
}

.weixinmao-msg-usertel {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.weixinmao-content-usertel {
    width: 550rpx;
    height: 350rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.weixinmao-content-usertel .usertel-title {
    align-self: left;
    margin-left: 40rpx;
    font-size: 1.2rem;
    margin-top: 40rpx;
}

.weixinmao-content-usertel .usertel-content {
    align-self: left;
    margin-left: 40rpx;
    font-size: 0.9rem;
    margin-top: 40rpx;
}
.usertel-button {
    display: flex;
    flex-direction: row;
    width: 400rpx;
}
.usertel-button button {
    background: #fff;
    font-size: 0.8rem;
}
.usertel-button button:nth-child(2) {
    color: #d65408;
}

button::after {
    border: none;
}
@import 'undefined';
</style>
